import { FC, useRef, useState } from "react";
import {  useNavigate, useParams } from "react-router-dom";
import {RollbackOutlined,QrcodeOutlined,CopyOutlined} from '@ant-design/icons'
import style from './index.module.scss'
import classnames from 'classnames/bind'
import { Button, Input, Space,Popover,Tooltip, InputRef, message } from "antd";
import QRCode from 'qrcode.react'

const CBN = classnames.bind(style)

const StatHead:FC = ()=>{
    const {id} = useParams()
    const qrcodeurl = `http://localhost:3000/question/${id}`
    const content = (
        <QRCode value={qrcodeurl} size={120} fgColor="#000000">
            
        </QRCode>
    )

    const refurl = useRef<InputRef>(null)
    const nav = useNavigate()
    const CopyQRcode = ()=>{
        refurl.current?.select()
        document.execCommand('copy')
        message.success('复制成功')
    }


    return <div className={CBN('StatHead')}>
        <Space>
            <Button icon = {<RollbackOutlined />} onClick={()=>{
                nav(-1)
            }}></Button>
        </Space>
        <Space direction='horizontal' size='small' className={CBN('MiddleHead')}>
                <Input readOnly value={qrcodeurl} style={{ width: "380px", textAlign: "center" }} ref={refurl}></Input>
                <Tooltip title="复制链接">
                    <Button icon ={<CopyOutlined />} onClick={CopyQRcode}></Button>
                </Tooltip>
                <Popover placement="topLeft"  content={content}>
                    <Button type='default' icon = {<QrcodeOutlined />}></Button>
                </Popover>
        </Space>
        <Space>
            <Button type='primary'>编辑问卷</Button>
        </Space>
    </div>
}


export default StatHead